<template>
	<view class="content">
		<view class="header">
			<!--search-->
			<view style="padding-top: 20rpx;">
				<input type="text" value="" confirm-type="search" @confirm="confirm" placeholder="请输入课程名称搜索" class="searchInput" v-model="classifyName" />
			</view>
			<!--swiper-->
			<view class="swiper">
				<swiper class="swiper" 
						:indicator-dots="indicatorDots" 
						:autoplay="autoplay" 
						:interval="interval" 
						:duration="duration"
						:circular='true'>
					<swiper-item v-for="i in adArr">
						<view class='swiper-item' :style="'background:url('+i+')'"></view>
					</swiper-item>
				<!-- 	<swiper-item>
						<view class='swiper-item' style="background:url(https://xb-street.oss-cn-shanghai.aliyuncs.com/yl-school/static/ad2.png)"></view>
					</swiper-item> -->
				</swiper>
			</view>
		</view>
		
		<view class="wrapper">
			<view class="catMenu">
				<scroll-view class="tab-bar" :scroll="false" :scroll-x="true" :show-scrollbar="false">
				   <view style="flex-direction: row;display: flex;">
				      <view class="uni-tab-item" v-for="(tab,index) in catList" :key="tab.id" @click="ontabtap(index,tab.id)">
				        <text class="uni-tab-item-title" :class="tabIndex==index ? 'uni-tab-item-title-active':''">{{tab.classifyName}}</text>
				        <view :class="tabIndex==index ? 'uni-tab-item-active':''"></view>
						
					  </view>
				    </view>
				</scroll-view>
			</view>
			
			<view class="outer">
				<view class="course">
					<view v-for="itm in courseList" @click="goDetail(itm.id)">
						<image :src="itm.image" mode="" ></image>
						<!-- <view class="cimg" :style="'background:url('++');'"  > -->
						<!-- </view> -->
						<view class="ctitle">{{itm.className}}</view>
						<view class="cmarker">
							<text class="ccount">{{itm.number}}人已报名</text>
							<text class="cpoint">￥{{itm.price}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				indicatorDots: true,
				autoplay: true,
				interval: 5000,
				duration: 500,
				catList: [{
				  id: "tab01",
				  name: '全部',
				  newsid: 0
				}, {
				  id: "tab02",
				  name: '声乐系',
				  newsid: 23
				}, {
				  id: "tab03",
				  name: '戏曲系',
				  newsid: 223
				}, {
				  id: "tab04",
				  name: '时装表演系',
				  newsid: 221
				}, {
				  id: "tab05",
				  name: '美术系',
				  newsid: 225
				}, {
				  id: "tab06",
				  name: '舞蹈系',
				  newsid: 208
				}],
				tabIndex: 0,
				scrollInto: "",
				courseList:[],
				shopId:'',
				id:'',
				classifyName:'',
				adArr:['https://xb-street.oss-cn-shanghai.aliyuncs.com/yl-school/static/slide/slide1.jpg',
				'https://xb-street.oss-cn-shanghai.aliyuncs.com/yl-school/static/slide/slide3.jpg']
			}
		},
		onShow() {
			this.loadData();
		},
		onLoad() {
			this.shopId = uni.getStorageSync('shopId')
			uni.setNavigationBarTitle({
			title:uni.getStorageSync('shopName')
			})
		},
		methods: {
			confirm(){
				this.search()
			},
			ontabtap(index, id) {
				this.tabIndex = index;
				this.id = id
				this.loadData();
			},
			search(){
				uni.showLoading({
					title:"加载中..."
				})
				//TODO::加载数据
				this.$api.getClassNameAndClassifyIdByShopId({
					shopId:this.shopId,
				}).then((res) => {
					if(res.data.success){
						let parameter = {
							id:'',
							shopId:this.shopId,
							classifyName:'全部'
						}
						this.catList=res.data.dataMap
						this.catList.unshift(parameter)
					}
				})
				this.$api.getClassOrActivityListByShopIdAndClassifyId({
					shopId:this.shopId,
					classifyGoodsId:this.id,
					className:this.classifyName
				}).then((res) => {
					if(res.data.success){
						this.courseList=res.data.dataMap	
					}
							
				})
				uni.hideLoading();
			},
			loadData(){
				uni.showLoading({
					title:"加载中..."
				})
				//TODO::加载数据
				this.$api.getClassNameAndClassifyIdByShopId({
					shopId:this.shopId,
					classifyName:this.classifyName
				}).then((res) => {
					if(res.data.success){
						let parameter = {
							id:'',
							shopId:this.shopId,
							classifyName:'全部'
						}
						this.catList=res.data.dataMap
						this.catList.unshift(parameter)
					}
				})
				this.$api.getClassOrActivityListByShopIdAndClassifyId({
					shopId:this.shopId,
					classifyGoodsId:this.id,
					
				}).then((res) => {
					if(res.data.success){
						this.courseList=res.data.dataMap	
					}		
				})
				uni.hideLoading();
			},
			goDetail(id){
				uni.navigateTo({
					url:"course_detail?id="+id
				})
			}
		}
	}
</script>

<style lang="scss">
	.uni-input-placeholder{font-size: 12px;margin-left: 10px;}
	.outer{padding:0 5%;}
	.catMenu{font-size:28rpx;position: sticky;top: 0rpx;z-index: 100;background-color: #fff;}
	.header{
		padding:0 20rpx;
		background: #ffedec;
		border-radius: 0 0 100rpx 100rpx;
		height: 360rpx;
		.searchInput{
			background:url(https://xb-street.oss-cn-shanghai.aliyuncs.com/yl-school/static/icon/search.png);
			background-color: white;
			background-position: 15px;
			background-repeat: no-repeat;
			border:0;border-radius: 40rpx;padding:10rpx 70rpx;}
		.swiper{
			  margin-top:30rpx;
			  height: 380rpx;
			  
			  .swiper-item{
				  width:100%;
				  height:320rpx;
				  border-radius: 20rpx;
				  background-size: 100% 100%!important;
				  background-repeat: no-repeat;
				  
			  }
		}
	}
	.wrapper{
		margin-top:120rpx;
		.tab-bar {
		  /* #ifdef APP-PLUS */
		  width: 750rpx;
		  /* #endif */
		  height: 42px;
		  flex-direction: row;
		  /* #ifndef APP-PLUS */
		  white-space: nowrap;
		  /* #endif */
		  .uni-tab-item-title{color:#333333}
		  .uni-tab-item{padding:10rpx 30rpx;}
		  .uni-tab-item-title-active{font-weight: bold;}
		  .uni-tab-item-active{
		  	background:linear-gradient(90deg, rgb(255,228,106), rgb(249,155,68));
		  	border-radius: 20rpx;
			margin:auto;
		  	margin-top:5px;
		  	height:5px;
		  	width:25px;}
		}
	}
	
	.course{
		display: grid;
		grid-template-columns: calc(50% - 5px) calc(50% - 5px);
		grid-gap: 10px;
		image{
			width: 330rpx;
			height: 200rpx;
			border-radius: 16rpx;
		}
		.cimg{
			width:100%;
			height: 200rpx;
			border-radius: 20rpx;
		}
		.ctitle{
			font-weight: bold;
			font-size:26rpx;
			padding:5px 0 ;
			color: #222222;
		}
		.cmarker{
			display: flex;
			font-size: 24rpx;
			justify-content: space-between;
		}
		.ccount{color:#999999;}
		.cpoint{color:#FF5533;}
	}
</style>
